<!--
 * @Author: chenwenda316
 * @Date: 2022-12-14 13:40:40
 * @LastEditTime: 2023-01-27 16:57:04
 * @FilePath: \app\class_app_dev\src\components\BlogItem.vue
-->
<template>
    <n-card hoverable @pointerdown="handlePointerdown" @pointerup="handlePointerup">
        <!-- <n-card hoverable @click="atClick(props.data._id)"> -->
        <template #header>
            {{ props.data.title }}
        </template>
        <template #header-extra>
            <NSpace>
                <n-tag type="success" v-for="(i) in props.data.tags "> {{ i.label }} </n-tag>
            </NSpace>
        </template>
        {{ props.data.summary }}
        <template #footer>
            <NSpace justify="space-between">
                <NSpace>
                    <span>
                        {{ props.data.author.nickname }}
                    </span>
                    <n-text depth="3">
                        <n-time :time="props.data.date" format="yyyy-MM-dd HH:mm:ss" />
                        <!-- {{ props.data.createDate }} -->
                    </n-text>
                </NSpace>
                <n-text depth="3">
                    <NSpace>
                        <span>
                            <n-icon>
                                <Click></Click>
                            </n-icon>
                            {{ props.data.view }}
                        </span>
                        <span>
                            <n-icon>
                                <Comment></Comment>
                            </n-icon>
                            {{ props.data.commentCounts }}
                        </span>
                    </NSpace>
                </n-text>
            </NSpace>
        </template>
        <template v-if="props.data.author._id == login_status.userId" #action>
            <NSpace>
                <NButton type="info" @pointerup.stop @click.stop="changeHandle(props.data._id)">
                    修改文章
                </NButton>
                <NButton type="error" @pointerup.stop @click.stop="deleteHandle(props.data._id, props.data.title)">
                    删除
                </NButton>
            </NSpace>
        </template>
    </n-card>

</template>

<script setup lang="ts">
import { NCard, NText, NTag, NIcon, NTime, NButton, NSpace } from "naive-ui";
import { CursorClick24Regular as Click, Comment24Regular as Comment } from "@vicons/fluent";
import { loginStatus } from '@/stores/counter'
import { useRouter } from "vue-router";
import blogUtils from "@/api/blog";

const login_status = loginStatus();
const router = useRouter();

const props = defineProps(["data"]);

function atClick(id: string) {
    window.$utils.message.info("click at: " + id);
    router.push({
        name: "blogview", params: {
            id
        }
    });
}

let pointLastPositionBeforPointdown = {
    x: 0, y: 0
}
function handlePointerdown(e: PointerEvent) {
    console.log(e.clientX, e.clientY);
    console.log(e.pointerType);

    console.log("down");

    pointLastPositionBeforPointdown = {
        x: e.clientX, y: e.clientY
    }
}

function isTextSelected() {
    var selection = window.getSelection()
    return selection && selection.rangeCount > 0 && !selection.isCollapsed
}

function handlePointerup(e: PointerEvent) {
    console.log(e.clientX, e.clientY);
    const { x, y } = pointLastPositionBeforPointdown;
    if (Math.abs(x - e.clientX) < 5 && Math.abs(y - e.clientY) < 5 && !(e.button & 2) && !(isTextSelected())) {
        router.push({
            name: "blogview", params: {
                id: props.data._id
            }
        });
    }
}

function changeHandle(id: string) {
    router.push({
        name: "write_blog", params: {
            id
        }
    });
}

function deleteHandle(id: string, title: string) {
    window.$utils.dialog.error({
        title: "提示",
        content: "是否删除所选的，题为《" + title + "》的文章？",
        positiveText: '确定',
        negativeText: '算了',
        draggable: true,
        onPositiveClick: () => {
            window.$utils.message.success('确定' + id)
            blogUtils.deleteBLog(id);
        },
    })
}





</script>
